<template>
  <div id="app">
    <div class="leftbar" :class="{'leftbar_hide':fold}">
        <LeftContent/>
    </div>
    <div class="topbar">
        <div class="logo">
          <img src="./assets/logo.png">
          <div class="show_hide" @click="toggleLeftBar"></div>
        </div>
        <TopContent/>
    </div>
    <div class="content" :class="{'content_hide':fold}">
        <router-view/>
    </div>
  </div>
</template>

<script>
import LeftContent from '@/components/LeftContent'
import TopContent  from '@/components/TopContent'
export default {
  components: { LeftContent,TopContent},
  name: 'App',
  data () {
    return {
      fold:false
    }
  },
  methods: {
    toggleLeftBar() {
      this.fold = !this.fold
    }
  }
}
</script>

<style lang="less">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.topbar{
  width: 100%;
  height: 60px;
  background-color: #274582;
  border-bottom: 2px solid #42B983;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  .logo{
    position: relative;
      img{
        width: 200px;
        height: 60px;
      }
     .show_hide{
       width: 30px;
       height: 30px;
       position: absolute;
       top: 20px;
       right: 0;
     }
  }
}
.leftbar{
  transition: width 0.28s;
  width: 200px;
  height: 100vh;
  overflow-y: scroll;
  box-sizing: border-box;
  padding-top: 60px;
  background-color: #283d68;
  position: fixed;
  top: 0px;
  left: 0;
  z-index: 2;
  /*滚动条样式*/
        &::-webkit-scrollbar {/*滚动条整体样式*/
            width: 0px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 0px;
        }
        // &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        //     border-radius: 5px;
        //     -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        //     background: rgba(0,0,0,0.2);
        // }
        // &::-webkit-scrollbar-track {/*滚动条里面轨道*/
        //     -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        //     border-radius: 0;
        //     background: rgba(0,0,0,0.1);
        // }
}
.leftbar_hide{
  width: 0;
}
.right-main{
  background-color: greenyellow;
}
.content{
  transition: padding 0.28s;
  height: 100vh;
  box-sizing: border-box;
  padding: 60px 0 0 200px;
  width: 100%;
  position: relative;
  text-align: left;
}
.content_hide{
  padding: 60px 0 0 0;
}


h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
a {
  color: #42b983;
}
</style>
